<?php include 'head.php'; ?><!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
    <style>
        #icon {
            background: red;
        }

        .green {
            background: #00cc00 !important;
        }
    </style>
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-header"></div>
        <div class="layui-card-body">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div>
                        <div style="text-align: center;margin-top: 90px;">
                            <i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe705;</i>
                            <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                开始训练
                            </div>
                            <div style="font-size: 14px;color: #666;margin-top: 20px;">系统将从真题库里随机抽取问题</div>
                        </div>
                        <div style="text-align: center;margin-top: 50px;">
                            <button class="pear-btn pear-btn-success" id="start">开 始</button>
                        </div>
                    </div>
                    <div>
                        <form class="layui-form" action="javascript:void(0);" style="margin: 0 auto; padding-top: 40px;">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <h3 style="font-size: 20px; margin-top: 20px;" id="title"></h3>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">选项</label>
                                <div class="layui-input-block">
                                    A.<input type="radio" name="options" id="options1" value="options1" title="A">
                                    B.<input type="radio" name="options" id="options2" value="options2" title="B">
                                    C.<input type="radio" name="options" id="options3" value="options3" title="C">
                                    D.<input type="radio" name="options" id="options4" value="options4" title="D">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="pear-btn pear-btn-success" id="pre">重新获取题目</button>
                                    <button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
                                        &emsp;确认提交&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <div style="text-align: center;margin-top: 90px;">
                            <i class="layui-icon layui-circle" id="icon" style="color: white;font-size:30px;font-weight:bold;padding: 20px;line-height: 80px;"></i>
                            <div style="font-weight: 500;margin-top: 30px;" id="result">
                                提交成功
                            </div>
                            <b id="answ"></b>
                            <div style="font-size: 15px;margin-top: 20px;" id="parse">题目解析</div>
                        </div>
                        <div style="text-align: center;margin-top: 50px;">
                            <button class="pear-btn pear-btn-success" id="next">再来一题</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="/component/layui/layui.js"></script>

<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery', 'button', 'popup', 'step', 'element', 'loading'], function() {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            button = layui.button,
            popup = layui.popup,
            step = layui.step,
            loading = layui.loading;


        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%',
            stepWidth: '600px',
            height: '500px',
            stepItems: [{
                title: '开始'
            }, {
                title: '题目'
            }, {
                title: '完成'
            }]
        });

        $('#start').click(function() {
            loading.Load(1, "请稍等");


            $.ajax({
                url: './ajax.php?act=exam',
                type: "POST",
                timeout: "5000",
                success: function(data) {
                    loading.loadRemove();
                    if (data.code == "200") {
                        window.question = data.data;
                        $('#title').text(data.data.title);
                        $('#options1').attr("title", data.data.options1);
                        $('#options2').attr("title", data.data.options2);
                        $('#options3').attr("title", data.data.options3);
                        $('#options4').attr("title", data.data.options4);
                        form.render();
                        step.next('#stepForm');
                    } else {
                        popup.failure(data.msg);
                    }
                },
                error: function(XMLResponse) {
                    loading.loadRemove();
                    popup.failure("接口异常");
                }
            });

            return false;
        });

        function myans($ans) {
            switch ($ans) {
                case 'options1':
                    return 'A';
                    break;
                case 'options2':
                    return 'B';
                    break;
                case 'options3':
                    return 'C';
                    break;
                case 'options4':
                    return 'D';
                    break;

                default:
                    return false;
                    break;
            }
        }

        form.on('submit(formStep2)', function(data) {
            if (data.field.options == '' || data.field.options == null) {
                popup.failure("请选择选项！");
                return false;
            }
            if (data.field.options == window.question.answer) {
                $("#result").html("<h3 color=green>回答正确！</h3>");
                $("#parse").html(window.question.parse);
                $("#icon").addClass('green');
                $("#icon").html("&#xe605;");
            } else {
                $("#result").html("<h3 color=red>回答错误！</h3>");
                $('#answ').text('正确答案' + myans(window.question.answer));

                $("#parse").html(window.question.parse);
                $("#icon").removeClass('green');
                $("#icon").html("&#x1006;");
            }
            step.next('#stepForm');
            $('.layui-form')[0].reset();
            console.log(data.field.options);
            console.log(window.question.answer);
            return false;
        });

        $('#pre').click(function() {
            step.pre('#stepForm');
            return false;
        });

        $('#next').click(function() {
            step.next('#stepForm');
            return false;
        });

        // 修改信息
        form.on('submit(formDemo)', function(data) {

            /// 验证
            console.log(data.field);

            /// 按钮加载动画
            var load = button.load({
                elem: '.pear-btn-primary'
            });
            /// 登录
            $.ajax({
                url: './ajax.php?act=set',
                type: "POST",
                timeout: "5000",
                data: data.field,
                success: function(data) {
                    load.stop();
                    if (data.code == "200") {
                        popup.success(data.msg);
                    } else {
                        popup.failure(data.msg);
                    }
                },
                error: function(XMLResponse) {
                    load.stop();
                    popup.failure("提交异常");
                }
            });

            return false;
        });
    });
</script>

</html>